<template>
	<view class="content">
		<view class="frame">
			<view class="u-flex u-col-top">
				<textarea maxlength="200" v-model="content" placeholder="请写下您的建议，如功能需求、产品吐槽等，我们会努力改进"
					placeholder-class="placeholder-style" class="input"></textarea>
			</view>
            <view class="img-box">
                <view class="img-box-item" v-for="(item, index) in imgUrl" :key="index" v-if="imgUrl.length">
                    <image :src="item" class="up-img" @click="doPreview(item)"></image>
                    <view class="del-img" @click="delImg(index)">删除</view>
                </view>
                <image src="/static/image/up_photo.png" class="up-img" v-if="imgUrl.length < 3" @click="chooseImg"></image>
            </view>
			<view class="frame1">
                <view class="u-flex" @click="change">
                    <image src="../../static/icon/choose.png" class="choose" v-if="anonymous == 1"></image>
                    <image src="../../static/icon/cancel.png" class="choose" v-if="anonymous == 0"></image>
                    <view>匿名投诉</view>
                </view>
				<view class="num-tit">{{content.length}}/200字</view>
			</view>
		</view>
        <view class="tip">若有紧急问题需要咨询或解决，请联系在线客服，谢谢!</view>
		<view class="btn" @click="doSubmit">提交</view>
	</view>
</template>

<script>
    import { API_URL } from '@/static/js/common.js';
	export default {
		data() {
			return {
                URL: API_URL, //上传图片用的
                imgUrl: [],//图片
                imgId: [],//图片id
				content: '',
                anonymous: 0,
			};
		},
		onLoad() {
            
        },
		methods: {
            // 提交
            doSubmit() {
                if (!this.content) {
                    this.$toast('请输入反馈内容');
                    return
                }
                this.$ajax('user_complaint', {
                	user_token: this.$getSync('userToken'),
                    msg: this.content,
                    images: this.imgId.join(','),//图片id，分割字符串
                    anonymous: this.anonymous,//0不匿名 1匿名
                }).then(ret => {
                	if (ret.success == 1000) {
                		this.$toast('已提交');
                        setTimeout(() => {
                            this.$backT()
                        }, 300)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            change() {
                this.anonymous = this.anonymous == 0 ? 1 : 0
            },
            // 上传图片
            chooseImg() {
                // #ifdef APP-PLUS
                var galleryPermission = plus.navigator.checkPermission("camera");
                if (galleryPermission == "undetermined") {
                    this.$toast('相机权限使用说明：用于拍照上传图片');
                }
                // #endif
                uni.chooseImage({
                    count: 9, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        uni.uploadFile({
                            url: this.URL + 'api/upload_image', //仅为示例，并非真实接口地址。
                            filePath: res.tempFilePaths[0],
                            name: 'image',
                            formData:{
                                module: 'api'
                            },
                            success: result => {
                                console.log(result)
                                let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
                                this.imgUrl.push(data.image);
                                this.imgId.push(data.image_id);
                            }
                        });
                    }
                });
            },
            // 预览图片
            doPreview(item) {
            	var arr = [];
            	arr.push(item);
            	uni.previewImage({
            	    urls: arr,
            	    longPressActions: {
            	        success: function(data) {
            	        },
            	        fail: function(err) {
                            console.log(err)
            	        }
            	    }
            	});
            },
            //删除
            delImg(index) {
                uni.showModal({
                    title: '提示',
                    content: '确定要删除吗？',
                    success: res => {
                        if (res.confirm) {
                            this.imgId.splice(index, 1);
                            this.imgUrl.splice(index, 1);
                        } else if (res.cancel) {
                            
                        }
                    }
                });
            },
        }
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
    .tip{
        font-size: 24rpx;
        color: #fe6155;
        padding: 25rpx 30rpx 0;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .img-box-item{
        position: relative;
    }
    
    .del-img{
        font-size: 24rpx;
        color: #fff;
        padding: 5rpx 8rpx;
        background: rgba(0,0,0, .5);
        position: absolute;
        right: 15rpx;
        bottom: 15rpx;
    }
    
    .up-img{
        width: 149rpx;
        height: 145rpx;
        margin-right: 14rpx;
        margin-bottom: 14rpx;
    }
    
    textarea{
        width: 100%;
        height: 600rpx!important;
        font-size: 24rpx;
        color:#333;
    }
	.content {

		.frame {
			width: 100%;
			background-color: #fff;
			padding: 52rpx 20rpx 20rpx;
			margin-top: 16rpx;

			.input {
				display: inline-block;
				padding: 0 20rpx;
				font-size: 26rpx;
				color: #000;
				height: 260rpx !important;
				margin-bottom: 16rpx;
			}

			.placeholder-style {
				color: #a7a7a7;
			}

			.input-icon {
				width: 34rpx;
				height: 34rpx;
			}

			.frame1 {
				width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24rpx;
                padding: 10rpx 0;
                
                .choose{
                    width: 31rpx;
                    height: 31rpx;
                    margin-right: 10rpx;
                }
				.num-tit {
					color: #959595;
				}
			}
		}

		.btn {
			border-radius: 50rpx;
			background: #00a1e9;
			font-size: 34rpx;
			color: #fff;
			text-align: center;
            padding: 25rpx;
			margin: 70rpx 25rpx;
		}
	}
</style>
